<template>
  <ul>
      <li v-for="item in items" :key="item.id">
          <span>{{ item.id }} </span>
          <span>{{ item.name }} </span>
          <span>{{ item.price }} </span>
          <span>{{ item.number }} </span>
          <span>{{ (item.price * item.number).toFixed(2) }} </span>
          <span>
              <a @click="remove(item.id)">删除</a>
          </span>
      </li>
  </ul>
</template>

<script>
export default {
    name: 'CartItem' ,
    // 子组件有一个 inject 选项来开始使用这些数据
    inject: [ 'items' ],
    methods: {
        remove( id ) {
            console.log( `即将删除${id}` );
            console.log( this.items.length );
            let index = this.items.findIndex( item => item.id == id );
            console.log( `将被删除的元素索引${index}` );
            this.items.splice( index , 1 );
            console.log( this.items.length );
        }
    }
}
</script>

<style scoped>
li {
    display: flex ;
    margin: 5px ;
    border-bottom: 1px solid #dedede ;
}

li>span {
    flex-basis: 100px ;
}

li>span:nth-child(2) {
    flex-basis: 300px ;
}

a {
    display: inline-block;
    padding: 5px ;
    background: #5544FF;
    color: #fff ;
    cursor: pointer ;
}
</style>